<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router"

const router = useRouter()

const dataList = ref<any>([
  {
    name: "练课(每周2次) 艺术:线上创意课+线下美术馆参观",
    marketPrice: "￥50",
    salesPrice: "￥50",
    status: "已上架"
  }, {
    name: "蒙氏教具操作(每天30分钟) 运动",
    marketPrice: "￥50",
    salesPrice: "￥50",
    status: "已下架"
  }
]);

const handleAction = (action: string) => {
  if (action === 'add') {
    router.push({ name: "XiaolankaAdminProductForm" })
  }
};
</script>

<template>
  <umrp-container bg-color="#f2f2f2" height="100%" padding="16px" :gap="16">
    <umrp-breadcrumb :items="['商品管理', '商品列表']"></umrp-breadcrumb>
    <umrp-search-card>
      <umrp-row :gutter="16">
        <umrp-col :span="8">
          <umrp-form-item label="商品名称">
            <umrp-input placeholder="请输入商品名称"></umrp-input>
          </umrp-form-item>
        </umrp-col>
        <umrp-col :span="8">
          <umrp-form-item label="商品状态">
            <umrp-select>
              <umrp-option value="1">全部</umrp-option>
              <umrp-option value="2">已上架</umrp-option>
              <umrp-option value="3">已下架</umrp-option>
            </umrp-select>
          </umrp-form-item>
        </umrp-col>
      </umrp-row>
    </umrp-search-card>
    <umrp-card>
      <umrp-table :data="dataList" :action-bar="true" @action="handleAction">
        <template #columns>
          <umrp-table-column title="序号" data-index="id"></umrp-table-column>
          <umrp-table-column title="商品头图" slot-name="cover"></umrp-table-column>
          <umrp-table-column title="商品名称" data-index="name"></umrp-table-column>
          <umrp-table-column title="市场价格" data-index="marketPrice"></umrp-table-column>
          <umrp-table-column title="商品价格" data-index="salesPrice"></umrp-table-column>
          <umrp-table-column title="商品状态" data-index="status"></umrp-table-column>
          <umrp-table-column title="操作" slot-name="action" :width="120"></umrp-table-column>
        </template>
        <template #amount="{ record }">
          <umrp-text-price>{{ record.amount }}</umrp-text-price>
        </template>
        <template #action>
          <umrp-space :size="10">
            <umrp-space :size="10">
              <umrp-button @click="router.push({ name: 'XiaolankaAdminProductForm' })" type="primary">编辑</umrp-button>
              <umrp-popconfirm message="您确认删除么？">
                <umrp-button type="danger">删除</umrp-button>
              </umrp-popconfirm>
            </umrp-space>
          </umrp-space>
        </template>
        <template #cover>
          <umrp-image :width="50" :height="50"></umrp-image>
        </template>
      </umrp-table>
    </umrp-card>
  </umrp-container>
</template>